<template>
    <view class="user-info-modal" :class="{ 'visible': visible, 'dark-mode': isDarkMode }">
        <view class="modal-mask" @tap="handleClose"></view>
        <view class="modal-content">
            <!-- 顶部标题栏 -->
            <view class="modal-header">
                <text class="modal-title">完善个人信息</text>
                <text class="modal-subtitle">请设置您的昵称和头像</text>
            </view>

            <!-- 头像选择区域 -->
            <view class="avatar-section">
                <button class="avatar-wrapper" :class="{ 'uploading': isUploading }" open-type="chooseAvatar"
                    @chooseavatar="onChooseAvatar">
                    <image v-if="avatarUrl" :src="avatarUrl" mode="aspectFill" class="avatar-image"></image>
                    <view v-else class="avatar-placeholder">
                        <text class="bigfont big-xiangji"></text>
                    </view>
                    <view v-if="isUploading" class="avatar-loading"></view>
                </button>
                <text class="avatar-tip">{{ isUploading ? '正在上传...' : '点击更换头像' }}</text>
            </view>

            <!-- 昵称输入区域 -->
            <view class="nickname-section">
                <view class="input-wrapper">
                    <input type="nickname" class="nickname-input" placeholder="请输入昵称"
                        :placeholder-style="placeholderStyle" @blur="onNicknameChange" v-model="nickname" />
                </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-section">
                <button class="submit-btn" :disabled="!isValid" :class="{ 'disabled': !isValid }" @tap="handleSubmit">
                    <text>完成</text>
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { updateUserInfo } from '@/api/user';
import { uploadFile } from '@/utils/upload';
import { computed, ref } from 'vue';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    isDarkMode: {
        type: Boolean,
        default: false
    },
    loginData: {
        type: Object,
        required: true
    }
});

const emit = defineEmits(['update:visible', 'submit']);

const nickname = ref('');
const avatarUrl = ref('');
const isUploading = ref(false);

// 计算placeholder样式
const placeholderStyle = computed(() => {
    return `color: ${props.isDarkMode ? 'rgba(255, 255, 255, 0.3)' : '#AAAAAA'}`;
});

// 验证表单是否有效
const isValid = computed(() => {
    return nickname.value.trim().length > 0 && avatarUrl.value && !isUploading.value;
});

// 处理头像选择和上传
const onChooseAvatar = async (e) => {
    const tempFilePath = e.detail.avatarUrl

    try {
        isUploading.value = true;
        // 调用上传接口
        const result = await uploadFile(tempFilePath);

        if (result) {
            avatarUrl.value = result;
        } else {
            uni.showToast({
                title: '上传失败，请重试',
                icon: 'none'
            });
        }
    } catch (error) {
        uni.showToast({
            title: '上传失败，请重试',
            icon: 'none'
        });
    } finally {
        isUploading.value = false;
    }
};

// 处理昵称变化
const onNicknameChange = (e) => {
    nickname.value = e.detail.value;
};

// 提交表单
const handleSubmit = async () => {
    if (!isValid.value) return;

    try {
        console.log(props.loginData);

        // 调用更新用户信息接口，合并登录数据和用户信息
        const res = await updateUserInfo({
            ...props.loginData,  // 包含登录返回的数据
            nickname: nickname.value.trim(),
            avatar: avatarUrl.value
        });

        if (res.code === 200) {
            uni.showToast({
                title: '保存成功',
                icon: 'success'
            });
            emit('submit', {
                ...props.loginData,
                nickname: nickname.value.trim(),
                avatarUrl: avatarUrl.value
            });
            emit('update:visible', false);
        } else {
            uni.showToast({
                title: res.msg || '保存失败',
                icon: 'none'
            });
        }
    } catch (error) {
        uni.showToast({
            title: '保存失败，请重试',
            icon: 'none'
        });
    }
};

// 关闭弹窗
const handleClose = () => {
    emit('update:visible', false);
};
</script>

<style>
.user-info-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 999;
    visibility: hidden;
    transition: visibility 0.3s;
}

.user-info-modal.visible {
    visibility: visible;
}

.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s;
}

.user-info-modal.visible .modal-mask {
    opacity: 1;
}

.modal-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
    background: #FFFFFF;
    border-radius: 24rpx 24rpx 0 0;
    padding: 24rpx 0;
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-info-modal.visible .modal-content {
    transform: translateY(0);
}

/* 添加顶部拖动条 */
.modal-content::before {
    content: '';
    position: absolute;
    top: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background: #E8E8E8;
    border-radius: 2rpx;
}

.modal-header {
    text-align: center;
    margin: 24rpx 0;
    padding: 0 24rpx;
}

.modal-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8rpx;
    display: block;
    letter-spacing: 0.3px;
}

.modal-subtitle {
    font-size: 24rpx;
    color: #999999;
    letter-spacing: 0.2px;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24rpx;
    width: 100%;
}

.avatar-wrapper {
    width: 120rpx !important;
    height: 120rpx !important;
    border-radius: 50% !important;
    background: #F6F7FB !important;
    position: relative !important;
    margin-bottom: 12rpx !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

/* 添加上传中的样式 */
.avatar-wrapper.uploading {
    opacity: 0.7;
    pointer-events: none;
}

.avatar-wrapper.uploading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.avatar-loading {
    position: absolute !important;
    z-index: 2 !important;
    width: 36rpx !important;
    height: 36rpx !important;
    border: 3rpx solid #5B9EE7 !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: avatar-loading 0.8s linear infinite !important;
}

@keyframes avatar-loading {
    to {
        transform: rotate(360deg);
    }
}

.avatar-wrapper:active {
    transform: scale(0.96) !important;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
}

.avatar-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.avatar-wrapper::after {
    border: none !important;
    background: none !important;
}

.avatar-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(91, 158, 231, 0.1) !important;
}

.avatar-placeholder .bigfont {
    font-size: 44rpx !important;
    color: #5B9EE7 !important;
    opacity: 0.8 !important;
}

.avatar-edit-icon {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40rpx !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.avatar-edit-icon .bigfont {
    font-size: 28rpx !important;
    color: #FFFFFF !important;
}

.avatar-tip {
    font-size: 22rpx;
    color: #999999;
    letter-spacing: 0.2px;
}

.nickname-section {
    margin-bottom: 24rpx;
    padding: 0 32rpx;
    width: 100%;
    box-sizing: border-box;
}

.input-wrapper {
    position: relative;
    background: #F6F7FB;
    border-radius: 10rpx;
    padding: 16rpx 20rpx;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s;
    border: 1rpx solid transparent;
}

.input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: #5B9EE7;
    box-shadow: 0 2rpx 8rpx rgba(91, 158, 231, 0.12);
}

.nickname-input {
    font-size: 26rpx;
    color: #333333;
    width: 100%;
    box-sizing: border-box;
    height: 32rpx;
    line-height: 32rpx;
    font-weight: 400;
}

.submit-section {
    margin-top: 32rpx;
    padding: 0 32rpx;
    width: 100%;
    box-sizing: border-box;
}

.submit-btn {
    width: 100% !important;
    height: 80rpx;
    background: rgba(91, 158, 231, 0.15);
    border-radius: 40rpx;
    color: #5B9EE7;
    font-size: 28rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border: none;
    line-height: normal;
    box-shadow: none;
    letter-spacing: 0.5px;
    position: relative;
}

.submit-btn text {
    font-weight: 500;
}

.submit-btn:active {
    transform: scale(0.96);
    background: rgba(91, 158, 231, 0.1);
}

/* 有效状态 */
.submit-btn:not(.disabled) {
    background: #5B9EE7;
    color: #FFFFFF;
    box-shadow: 0 6rpx 12rpx rgba(91, 158, 231, 0.15);
}

.submit-btn:not(.disabled):active {
    transform: scale(0.96);
    background: rgba(91, 158, 231, 0.9);
    box-shadow: 0 2rpx 8rpx rgba(91, 158, 231, 0.12);
}

.submit-btn.disabled {
    opacity: 0.5;
    background: rgba(91, 158, 231, 0.3);
    box-shadow: none;
}

/* 暗黑模式按钮样式 */
.dark-mode .submit-btn {
    background: rgba(91, 158, 231, 0.15);
    color: rgba(91, 158, 231, 0.9);
}

.dark-mode .submit-btn:not(.disabled) {
    background: rgba(91, 158, 231, 0.9);
    color: #FFFFFF;
    box-shadow: 0 6rpx 12rpx rgba(91, 158, 231, 0.12);
}

.dark-mode .modal-content {
    background: #1A1A1A;
    box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.2);
}

.dark-mode .modal-content::before {
    background: #333333;
}

.dark-mode .modal-title {
    color: #FFFFFF;
}

.dark-mode .modal-subtitle {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .avatar-wrapper {
    background: #2A2A2A !important;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .avatar-placeholder {
    background: rgba(91, 158, 231, 0.15) !important;
}

.dark-mode .input-wrapper {
    background: #2A2A2A;
    border-color: transparent;
}

.dark-mode .input-wrapper:focus-within {
    background: #333333;
    border-color: #5B9EE7;
    box-shadow: 0 4rpx 16rpx rgba(91, 158, 231, 0.08);
}

.dark-mode .nickname-input {
    color: #FFFFFF;
}

.dark-mode .avatar-tip {
    color: rgba(255, 255, 255, 0.6);
}
</style>